<template>
  <div class="reg">
<div class="wrapper">
    <div class="header clearfix">
      <div class="register-bar"><a @click="$router.push('/login')">立即登录</a>已经有易创天下账号？</div>
      <div class="logo">
        <a title="易创天下" href=""><img width="200" height="50" title="易创天下" alt="易创天下" src="../image/logo.png">
          <p style="text-align: center">易创天下网上商城</p>
        </a> </div>
    </div>
    <div class="register-wrap clearfix">
      <div class="title">快速注册，易创天下欢迎您</div>
      <div class="register-module">
        <ul class="register-tab clearfix" id="J_register">
          <li class="current" rel="phone"><span class="phone-number">手机号注册</span></li>
        </ul>
        <div class="register-phone-number">
          <div class="register-form">
            <div class="label"><em class="xh">*</em>手机号：</div>
            <input type="text" class="text" maxlength="11" v-model="userPhone">
            <div class="tips">请填写手机号码</div>
          </div>
          <!--验证拼图-->
          <div class="register-form">
            <div class="label"><em class="xh">*</em>验证码：</div>
            <!--验证拼图-->
            <div class="login-content" style="padding: 0 0 15px 0;">
              <div class="geetest_holder geetest_douyufullpage" @click="handleShowImg" :class="isSuccess? 'geetest_radar_success' : 'geetest_wait_compute'"
                style="width: 290px;">
                <div class="geetest_form"><input type="hidden" name="geetest_challenge"><input type="hidden" name="geetest_validate"><input
                    type="hidden" name="geetest_seccode"></div>
                <div class="geetest_btn">
                  <div class="geetest_radar_btn">
                    <div class="geetest_radar">
                      <div class="geetest_ring">
                        <div class="geetest_small"></div>
                      </div>
                      <div class="geetest_sector" style="transform: rotate(88.1842deg);">
                        <div class="geetest_small"></div>
                      </div>
                      <div class="geetest_dot"></div>
                    </div>
                    <div class="geetest_radar_tip" tabindex="0" aria-label="点击按钮进行验证" style="outline-width: 0px;">
                      <span class="geetest_radar_tip_content">点击按钮进行验证</span>
                      <span class="geetest_radar_error_code"></span></div><a class="geetest_logo" target="_blank" href="http://www.geetest.com/first_page"></a>
                  </div>
                  <div class="geetest_ghost_success" :class="{'geetest_success_animate': isSuccess}">
                    <div class="geetest_success_btn">
                      <div class="geetest_success_box">
                        <div class="geetest_success_show">
                          <div class="geetest_success_pie"></div>
                          <div class="geetest_success_filter"></div>
                          <div class="geetest_success_mask"></div>
                        </div>
                        <div class="geetest_success_correct">
                          <div class="geetest_success_icon"></div>
                        </div>
                      </div>
                      <div class="geetest_success_radar_tip"><span class="geetest_success_radar_tip_content">验证成功</span><span
                          class="geetest_success_radar_tip_timeinfo"></span></div><a class="geetest_success_logo"
                        target="_blank" href="http://www.geetest.com/first_page"></a>
                    </div>
                  </div>
                </div>
              </div>
              <!---->
              <!--dddd -->
            </div>
            <div class="tips">请[ 点击按钮进行验证 ]完成验证</div>

          </div>
          <!--验证拼图-->
          <div class="register-form">
            <div class="label"><em class="xh">*</em>验证码：</div>
            <div class="sms-captcha clearfix">
              <input type="tel" class="text" v-model="code" maxlength='4'>
              <GetCode class="get-captcha" :status.sync="status" @handleGetCode="status=false" :phone="userPhone"
                :ChangeType='1'></GetCode>
            </div>
            <div class="tips">请填写手机号码，然后点击[获取验证码]</div>
          </div>
          <div class="register-form">
            <div class="label"><em class="xh">*</em>密码：</div>
            <input type="password" class="text" v-model="pwd" maxlength='20'>
            <div class="tips">6-16位字母和数字的组合，不可用特殊字符</div>
          </div>
          <div class="register-form">
            <div class="label"><em class="xh">*</em>确认密码：</div>
            <input type="password" class="text" v-model="newPwd" maxlength='20'>
            <div class="tips">再次输入密码</div>
          </div>
          <label class="agreement">
            <input type="checkbox" checked="checked" v-model='checkbox'>同意<a>《商城用户协议》</a><a class="xy_a">《隐私权说明》</a>
          </label>
          <input type="button" value="注册" class="register-btn" @click="handleReg" />
        </div>
      </div>
    </div>
    <Vcode :show="isShow" @onSuccess="onSuccess" @onClose="onClose" />
</div>
<Foot></Foot>
  </div>
</template>
<script>
  import Vcode from "vue-puzzle-vcode";
  import GetCode from '@/components/getCode';
    import Foot from '@/components/footer';
  import * as API from '@/api/index';
  export default {
    data() {
      return {
        userPhone: '',
        pwd: '',
        newPwd: '',
        code: '',
        checkbox: false, //多选框
        status: true, //是否继续点击获取验证码
        isStatus: 1, //切换状态 
        isShow: false, // 验证码模态框是否出现
        isSuccess: false //拼图是否验证成功
      }
    },
    methods: {
      handleShowImg() {
        this.isShow = true;
      },
      async handleReg() { //注册  
        let checkPwdANewPwd = await this.newPwd === this.pwd ? true : this.$notify.error({
          title: '错误',
          message: '两次密码不一致'
        });
        let checkPwd = await this.pwd.length >= 6 ? true : this.$notify.error({
          title: '错误',
          message: '请填写6-20位的密码'
        });
        let checkCode = await this.code.length >= 4 ? true : this.$notify.error({
          title: '错误',
          message: '请填写4位验证码'
        });
        let checkPhone = await this.userPhone.length >= 11 ? true : this.$notify.error({
          title: '错误',
          message: '请填写11位手机号码'
        });
        let checkboxa = await this.checkbox ? true : this.$notify.error({
          title: '错误',
          message: '请同意阅读用户协议'
        });
        let Success = await this.isSuccess ? true : this.$notify.error({
          title: '错误',
          message: '拼图验证失败'
        });
        if (this.newPwd === this.pwd && checkPwd && checkCode && checkPhone && this.checkbox && this.isSuccess) {
          const data = {
            service: 'Pro.User.Register',
            phone: this.userPhone,
            code: this.code,
            password: this.pwd
          }
          const res = await API.toIndex(data);
          if (res.ret == 200) {
            localStorage.setItem('userInfo', JSON.stringify(res.data))
            this.$notify({
              title: '登录成功',
              message: res.msg,
              type: 'success'
            });
            setTimeout(() => {
              this.$router.push('/')
            }, 500)
          } else {
            this.$notify.error({
              title: '错误',
              message: res.msg
            });
          }
        }
      },
      onSuccess(msg) {
        this.isSuccess = true;
        this.isShow = false; // 通过验证后，需要自行隐藏模态框
      },
      // 用户点击遮罩层，应该关闭模态框
      onClose() {
        this.isShow = false;
      }
    },
    components: {
      GetCode,
      Vcode,
      Foot
    }
  }

</script>
<style lang="css">
  @import '../../scss/geetest.css';

  /* register-wrap */
  .register-wrap {
    padding: 0 0 100px;
    border: 1px solid #e6e6e6;
    width: 980px;
    margin: auto;
  }

  .register-wrap .title {
    padding: 16px 0 16px 90px;
    background: #fafafa;
    font: 18px/28px "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1";
    color: #999;
  }

  .register-module {
    float: left;
    padding: 30px 0 0 89px;
    width: 500px;
  }

  .register-tab {
    height: 39px;
    border-bottom: 1px solid #e6e6e6;
  }

  .register-tab li {
    float: left;
    position: relative;
    margin: 0 -1px;
    width: 250px;
    border: 1px solid #e6e6e6;
    border-bottom: 0 none;
    background: #fafafa;
    text-align: center;
    cursor: pointer;
  }

  .register-tab .current {
    margin: 0 -1px -1px;
    padding: 0 0 2px;
    border-top: 2px solid #e02d2d;
    background: #fff;
    cursor: default;
  }

  .register-tab .current span {
    color: #c00;
    line-height: 36px;
  }

  .register-tab span {
    display: inline-block;
    font: 18px/38px "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1";
  }

  .register-tab .phone-number {
    padding: 0 0 0 20px;
    background-position: -158px -281px;
  }



  .register-tab .current .phone-number {
    background-position: -158px -235px;
  }




  .register-phone-number {
    padding: 30px 0 0;
  }

  .register-form {
    position: relative;
    margin: 0 0 42px;
    padding: 0 0 0 83px;
    zoom: 1;
  }

  .register-form .label {
    position: absolute;
    top: 0;
    left: 0;
    width: 83px;
    font: 14px/40px "Arial";
    text-align: right;
    color: #666;
  }

  .register-form .label .xh {
    padding: 0 7px 0 0;
    font-size: 12px;
    font-family: "Simsun";
    color: #f30;
  }

  .register-form .text {
    display: block;
    margin: 0 10px 0 0;
    padding: 8px 5px;
    width: 278px;
    height: 22px;
    border: 1px solid #ccc;
    position: relative;
  }

  .text-button {
    background-image: linear-gradient(180deg, #ffffff 0%, #F3F3F3 100%);
    cursor: pointer;
    text-align: center;
    line-height: 1.5;
    color: green;
  }

  .register-form .sms-captcha .text {
    float: left;
    width: 158px;
  }

  .get-captcha {
    float: left;
    width: 110px;
    height: 40px;
    border: 0 none;
    background-position: 0 -148px;
    font: 12px/40px "Arial";
    color: #666;
    cursor: pointer;
    background: #f8f8f8;
    text-align: center;
    border: 1px solid #ccc;
  }

  .get-captcha:hover {
    background: #f2f2f2;
  }

  .register-form .tips {
    position: absolute;
    top: 47px;
    left: 83px;
    color: #aaa;
  }


  .agreement {
    display: block;
    padding: 0 0 0 83px;
    height: 32px;
    font: 12px/32px "Arial";
    color: #999;
  }

  .agreement input {
    margin: 0 8px 0 0;
    +margin: -1px 5px 0 -3px;
    _margin: -3px 5px 0 -4px;
  }

  .register-btn {
    display: block;
    margin: 20px 0 0 83px;
    width: 290px;
    height: 40px;
    font: bold 14px/40px "Arial";
    color: #fff;
    text-align: center;
    border: 0 none;
    background-position: 0 0;
    cursor: pointer;
  }

  .register-btn:hover {
    background-position: 0 -41px;
  }

  .register-btn {
    background: url(https://login.zol.com/image/bg.png) no-repeat;
  }

  /* header */
  .header {
    padding: 20px 0;
  }

  .logo {
    float: left;
  }

  .reg .wrapper {
    width: 990px!important;
    margin: 20px auto;
    flex:1;
  }
.reg{
  width:100%;
  height:100%;
  display:flex;
 flex-direction: column;
}
</style>
